<template>
  <a-card size="small">
    <template #title>
      <span class="text-title2"> {{ title }} </span>
    </template>
    <template #extra>
      <a-button type="text" @click="remove">
        <template #icon>
          <DeleteOutlined />
        </template>
      </a-button>
    </template>
    <a-radio-group v-model:value="info.type" :options="common.dealerType" />
    <template v-if="info.type < 4">
      <a-divider style="margin: 14px 0" />
      <template v-if="info.type == 1 || info.type == 2">
        <div class="text-title2">指定层级</div>
        <div class="mt-10">
          <span> 提交人的 </span>
          <a-select
            v-if="info.type == 1"
            style="width: 260px"
            v-model:value="info.higherLevelType"
            :options="common.higherLevelType"
          />
          <a-select
            v-if="info.type == 2"
            style="width: 260px"
            v-model:value="info.leaderType"
            :options="common.leaderType"
          />
        </div>
      </template>
      <template v-if="info.type == 3">
        <div>
          <span class="text-title2">添加成员</span>
          <span class="text-gray">（不能添加超过25人）</span>
        </div>
        <div class="mt-10 user-tag">
          <a-button
            type="link"
            @click="chooseMemberVisible = true"
            class="mr-10"
          >
            <template #icon>
              <PlusOutlined />
            </template>
            添加
          </a-button>
          <a-tag
            closable
            v-for="(user, index) of showMemberList"
            :key="user.uid"
            @close="memberRemove(index)"
            style="margin: 5px 10px 5px 0"
          >
            <a-avatar
              :src="user.avatar"
              style="color: #fff; background-color: #2681f3"
            >
              <template #icon><UserOutlined /></template>
            </a-avatar>
            <span class="ml-10"> {{ user.realname }} </span>
          </a-tag>
        </div>
      </template>
    </template>
    <!-- 选择人员 -->
    <ChooseOrgMember
      @request="$utils.commonRequest"
      :visible="chooseMemberVisible"
      :deptDisabled="true"
      :getDetail="true"
      :checkedList="memberCheckedList"
      @close="chooseMemberVisible = false"
      @success="handleChooseMemberSuccess"
    />
  </a-card>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {
  DeleteOutlined,
  PlusOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import common from "../js/common";
import { ChooseOrgMember } from "bl-common-vue3";

export default defineComponent({
  name: "MemberSetting",
  components: { DeleteOutlined, PlusOutlined, UserOutlined, ChooseOrgMember },
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "copy",
    },
    content: {
      type: Object,
      default: () => ({
        ...common.defaultMemberCard,
      }),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      info: {},
      chooseMemberVisible: false,
      memberCheckedList: {
        user: [],
        department: [],
      },
      showMemberList: [],
    });

    const handleChooseMemberSuccess = (detail) => {
      state.showMemberList = JSON.parse(JSON.stringify(detail.user));
      state.memberCheckedList.user = JSON.parse(JSON.stringify(detail.user));
      state.info.memberList = state.showMemberList.map((item) => item.uid);
      state.info.membersShow = JSON.parse(JSON.stringify(detail.user));
      state.chooseMemberVisible = false;
    };

    const memberRemove = (index) => {
      state.showMemberList.splice(index, 1);
      state.memberCheckedList.user.splice(index, 1);
      state.info.memberList.splice(index, 1);
      state.info.membersShow.splice(index, 1);
    };

    const remove = () => {
      emit("remove", { info: state.info, type: props.type });
    };
    const init = () => {
      state.info = props.content;
      if (
        props.content &&
        props.content.membersShow &&
        props.content.membersShow.length > 0
      ) {
        state.showMemberList = JSON.parse(
          JSON.stringify(props.content.membersShow)
        );
        state.memberCheckedList.user = JSON.parse(
          JSON.stringify(props.content.membersShow)
        );
      }
    };
    init();
    return {
      common,
      ...toRefs(state),
      remove,
      handleChooseMemberSuccess,
      memberRemove,
    };
  },
});
</script>

<style lang="less" scoped>
.user-tag {
  :deep(.ant-tag) {
    border-radius: 20px !important;
    padding: 0 12px 0 0 !important;
    background: #f1f1f1;
    border: none;
  }
}
.text-title2 {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7);
  // padding-left: 4px;
}
</style>
